<template>
  <div class="pl_box">
    <h2>评论</h2>
    <!-- 评论列表 -->
    <div v-for="comment in comments" :key="comment.id" class="comment">
      <div class="comment-header">
        <img :src="comment.avatar" class="comment-avatar">
        <div class="times_name_box">
          <div class="times_name">
            <div class="comment-author">{{ comment.author }}</div>
            <div class="comment-date">
              <span>{{ comment.date  | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </div>

          </div>
          <div>
            <div class="comment-content" v-html="highlightMentions(comment.content)" />
          </div>
        </div>

        <div class="comment-actions">
          <span class="comment-action" @click="showReplyForm(comment)">回复</span>
          <!-- <span class="comment-action" @click="toggleLike(comment)">
            {{ comment.liked ? '取消赞' : '赞' }}({{ comment.likeCount }})
          </span> -->
        </div>
      </div>
      <!-- 回复列表 -->
      <div v-for="reply in comment.replies" :key="reply.id" class="reply" :style="{ 'margin-left': '20px' }">
        <div class="reply-header">
          <img :src="reply.avatar" class="reply-avatar">

          <div class="times_name_box">
            <div class="times_name">

              <div class="reply-author">{{ reply.author }}</div>
              <div class="reply-date">
                <span>{{ reply.date  | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
              </div>
            </div>
            <div>
              <div class="reply-content" v-html="highlightMentions(reply.content)" />
              <!-- <span class="comment-action" @click="showReplyForm(comment)">回复</span> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 回复表单 -->
      <div v-show="comment.showReplyForm" class="reply-form">
        <el-input ref="replyInput" v-model="comment.replyContent" placeholder="回复内容" @input="handleReplyInput(comment)"  @keyup.enter="handleEnterKey(comment)" />
        <el-button type="primary" @click="addReply(comment)">回复</el-button>

      </div>

      <!-- 回复和点赞操作 -->
      <!-- <div class="comment-actions">
        <span class="comment-action" @click="showReplyForm(comment)">回复</span>
        <span class="comment-action" @click="toggleLike(comment)">
          {{ comment.liked ? '取消赞' : '赞' }}({{ comment.likeCount }})
        </span>
      </div> -->
    </div>

    <!-- 评论表单 -->
    <div class="comment-form">
      <el-input v-model="newCommentContent"  :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="发表评论" />
      <div style="margin-top: 10px;display: flex; justify-content:end;">
        <el-button v-if="this.newCommentContent!=''" @click="addquXiao">取消</el-button>
      <el-button v-if="this.newCommentContent!=''"  type="primary" @click="addComment">发送</el-button>
      </div>


    </div>
  </div>
</template>

<script>
import { Dictionary,Comments,Replies,FeishuList   } from '@/api/article'
// import { response } from 'express';

export default {
  props: ['temp'],
  data() {
    return {
      Indiener: JSON.parse(window.localStorage.getItem('urselist')),
      comments: [],
      newCommentContent: '',
      tongzList: [
        {
          name: '杜锦涛',
          tel: '17611294568',
          pinyin: 'dujintao'
        },
        {
          name: '张山山',
          tel: '15801580133'
        },
        {
          name: '闫晓龙',
          tel: '15296614598'
        },
        {
          name: '张鹏',
          tel: '18601062928'
        },
        {
          name: 'Ashley',
          tel: '13811163494'
        },
        {
          name: '马旸',
          tel: '15001278091'
        },
        {
          name: '高潭清(Judy)',
          tel: '18624491285'
        },
        {
          name: '方曼迪',
          tel: '15010153519'
        }, {
          name: '许亚青',
          tel: '13910055423'
        },
        {
          name: '胡少阳',
          tel: '17610572031'
        },
        {
          name: '崔高洁',
          tel: '15890612069'
        }, {
          name: '宋德胜',
          tel: '13205500866'
        }, {
          name: '万东峰',
          tel: '18614072819'
        }, {
          name: '张闻玉',
          tel: '13022942570'
        }, {
          name: '窦远东',
          tel: '13520804130'
        }, {
          name: '郭冀昂',
          tel: '13488835180'
        }, {
          name: '姜丽萍',
          tel: '13810411821'
        }, {
          name: '孙恒',
          tel: '13011106295'
        }, {
          name: '张锐',
          tel: '13121269668'
        }, {
          name: '周圆',
          tel: '18600224842'
        }, {
          name: '陈晨',
          tel: '15856317010'
        }, {
          name: '卢思奇',
          tel: '15313755647'
        }, {
          name: '徐凡乔',
          tel: '13683600106'
        }, {
          name: '李秋里',
          tel: '15801471670'
        }, {
          name: '凌晨',
          tel: '17801163936'
        }, {
          name: '王君辉',
          tel: '18518596668'
        }, {
          name: '吴江',
          tel: '18610631420'
        }, {
          name: '谢志弘',
          tel: '17666184228'
        }, {
          name: '邓岚',
          tel: '18810359775'
        }, {
          name: '郝文婷',
          tel: '17600115610'
        }, {
          name: '胡任菁',
          tel: '13517286227'
        }, {
          name: '刘敬玉',
          tel: '13911032007'
        }, {
          name: '童虎成',
          tel: '13718565970'
        }, {
          name: '李鑫敏',
          tel: '13753133264'
        }, {
          name: '王丹',
          tel: '15910803026'
        }, {
          name: '杜书惠',
          tel: '13522958139'
        }, {
          name: '李名扬',
          tel: '15801339148'
        }, {
          name: '陈家瑾',
          tel: '17608485566'
        }, {
          name: '王子艺',
          tel: '13936176604'
        }, {
          name: '曹思颀',
          tel: '13012262022'
        }, {
          name: '段宛辰',
          tel: '18500569586'
        }, {
          name: '郭盛君',
          tel: '17854580810'
        }, {
          name: '胡晓普',
          tel: '15901125380'
        }, {
          name: '靖宇',
          tel: '18515235093'
        }, {
          name: '郎雨晴',
          tel: '13401153710'
        }, {
          name: '黎诗韵',
          tel: '13006305826'
        }, {
          name: '李源',
          tel: '13760887537'
        }, {
          name: '连然',
          tel: '18548912956'
        }, {
          name: '卫诗婕',
          tel: '18311030219'
        }, {
          name: '吴敏珊',
          tel: '18027645560'
        }, {
          name: '向涵姝',
          tel: '13261000815'
        }, {
          name: '杨沐锦',
          tel: '18090009457'
        }, {
          name: '赵雨倩',
          tel: '13651319487'
        }, {
          name: '郑玄',
          tel: '13717888145'
        }, {
          name: '郑玥',
          tel: '13718774247'
        }, {
          name: '周永亮',
          tel: '13910257406'
        }, {
          name: '陈姚戈',
          tel: '15125253597'
        }, {
          name: '周艾霖',
          tel: '13250348165'
        }
      ],
    }
  },
  watch: {
    temp(newVal, oldVal) {
      // 监听temp prop的变化，并在每次变化时执行相应的函数
      this.handleTempChange(newVal, oldVal);
    }
  },
  mounted(){
    console.log(this.temp,'this');
    console.log(this.comments,'comments');
    // const aaa=this.comments.filter(item=>item.uid==this.temp.id)
    // console.log(aaa,'aaaaaaaaa');
    this.getComments()
    this.$parent.$on('custom-event', this.handleCustomEvent);
    // this.$parent.$on('custom-event', this.handleCustomEvent);
  },
  
  beforeDestroy() {
    // 解除对父组件自定义事件的监听
    this.$parent.$off('custom-event', this.handleCustomEvent);
  },
  methods: {
    addquXiao(){
      this.newCommentContent='2'
    },
    handleTempChange(newVal, oldVal) {
      // 在子组件中处理temp prop的变化
    this.getComments()

      console.log('temp prop已变化', newVal, oldVal);
      // 执行其他操作
    },
    handleCustomEvent(row) {
      // 在子组件中处理父组件的自定义事件
      console.log('子组件接收到自定义事件', row);
      // 执行其他操作
    },
    getComments(){
      Comments({id:this.temp.id}).then(res=>{
        const replies=[]
        res.data.length>0?res.data.map((item,index)=>{
          item['replies']=[]
          console.log(item,'itemitem');
        }):''
        Replies().then(responsed=>{
          res.data.map((item,index)=>{
            // console.log(item,'item');
            // console.log(responsed.data,'responsed.data');
            for(var i=0;i<responsed.data.length;i++){
              // console.log(item.id,responsed.data[i].commentId,'responsed[i].commentId');
              if(item.id==responsed.data[i].commentId){
               item.replies.push(responsed.data[i])
            }else{
                console.log('1');
            }
            }
          })


            console.log(responsed,'respoense');
        })
        console.log(res.data,'2222222222222');
        this.comments=res.data
      })
    },
    addDictionary() {
      try {
        Dictionary({comments:this.comments}).then(res => {
          console.log(res, 'rrrrrrrr');
        });
      } catch (error) {
        console.error('捕获到异常:', error);
      }

    },
    fetchMentionedUsers(query) {
    // 根据输入内容获取相关人员列表，可以从后端或本地数据中获取
    // 将相关人员列表赋值给 this.mentionedUsers
    },

    mentionUser(comment) {
      const mentionedUser = comment.mentionedUser
      if (mentionedUser) {
        comment.replyContent += ` @${mentionedUser.name} `
      }
      this.$refs.replyInput.focus() // 让输入框重新获得焦点
    },
    getFeishuList(){
      // FeishuList().then(res=>{
        console.log(this,'rrrrrrrrrr');
      const  name_list = this.temp.SelectionChange.split(',');
      const nameObj = {};
      const nameArr = name_list.map((name, index) => {
        return { name: name };
      });
         console.log(nameArr,'nameArr');
      // })
    //   this.tongzList.map((item, index) => {
    //     console.log(item.name, 'item');
    //     console.log(nameArr[index].name, 'index');
    //     if(item.name==nameArr[index].name){
    //       newNameArr.push(item)
    //     }
    //  });
     const result = this.tongzList.filter(item => {
      return nameArr.some(n => n.name === item.name);
    });
      const newNameArr=[]
      console.log(result, 'result');

        result.map((item)=>{
          newNameArr.push(item.tel)
        })

      console.log(newNameArr, 'newNameArr');
      console.log(this.temp.title, 'this.temp.titl');
      FeishuList({newNameArr,Indiener:this.Indiener.name,title:this.temp.title}).then(res=>{

      })
    },
    addComment() {
      if (!this.newCommentContent) return
      const newComment = {
        id: this.temp.id,
        uid:this.temp.id,
        author: this.Indiener.name,
        avatar: this.Indiener.avatar_big,
        date:  Date.now(),
        content: this.newCommentContent,
        liked: false,
        likeCount: 0,
        showReplyForm: false,
        replyContent: '',
        selectedUser: '',
        replies: []
      }
      this.comments.push(newComment)
      this.newCommentContent = ''
      this.addDictionary()
      this.getFeishuList()
    
      console.log(this.comments, 'this.comments')
    },
    showReplyForm(comment) {
      comment.showReplyForm = true
     
      console.log(this.comments, 'comments')
      // this.getFeishuList() //回复的时候也调用API通知
    },
    handleReplyInput(comment) {
      comment.replyContent = this.highlightMentions(comment.replyContent)
    },
    handleEnterKey(comment) {
    // 处理回车键的逻辑
    console.log('回车键被按下');
    this.addReply()
    // 这里可以调用提交回复的方法或其他你想要执行的逻辑
  },
    addReply(comment) {
      if (!comment.replyContent) return
      const newReply = {
        id: comment.replies.length + 1,
        author: this.Indiener.name,
        avatar: this.Indiener.avatar_big,
        date:  Date.now(),
        content: comment.replyContent
      }
      if (comment.selectedUser) {
        newReply.content = `@${comment.selectedUser} ${newReply.content}`
      }
      comment.replies.push(newReply)
      comment.replyContent = ''
      comment.showReplyForm = false
      comment.selectedUser = ''
      this.addDictionary()
      this.getFeishuList()
    },
    toggleLike(comment) {
      comment.liked = !comment.liked
      if (comment.liked) {
        comment.likeCount++
      } else {
        comment.likeCount--
      }
    },
    highlightMentions(content) {
      const regex = /@(\w+)/g
      return content.replace(regex, '<span class="mention">@$1</span>')
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  margin-bottom: 20px;
}

.comment-header {
  display: flex;
  align-items: center;
  padding: 0 2%;
}

.comment-actions{
  display: none;
}
// .comment-action{
//   display: none;
// }
.comment-header:hover{
  background: #ccc;
  border-radius: 18px;

.comment-actions{
  display: flex;
}

}
.comment-action{
  margin-right: 20px;
  cursor: pointer;
}

.comment-avatar,
.reply-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-author,
.reply-author {
  font-weight: bold;
}

.comment-date,
.reply-date {
  /* margin-left: auto; */
  margin-left: 2%;
  // color: rgba(255, 255, 255, 0.242);
}

.comment-content,
.reply-content {
  margin-top: 10px;
}

.reply-form {
  margin-top: 10px;
}

.comment-actions {
  margin-top: 10px;
  margin-left: auto;
}

.comment-action {
  margin-right: 20px;
  cursor: pointer;
}

.mention {
  color: #007bff;
}
.times_name_box{
  // display:flex;
  width: 30%;
  .times_name{
  display:flex;
  }
}
.reply-header{
  display: flex;
  margin-top: 20px;
  margin-left: 7%;
}



.pl_box{
  padding: 2% 6%;
  h2{
    margin-bottom: 3%;
  }
}

@media (max-width: 600px) {
  .times_name_box {
  width:60%;
  }
}
// .comment{
//   display: flex;
//   justify-content: space-between;
// }
</style>
